<template>
    <admin-container>
        <el-form label-width="120px" @submit.prevent.native="onSubmit">
            <el-form-item label="ID">
                {{ form.id }}
            </el-form-item>

            <el-form-item label="账号">
                {{ form.username }}
            </el-form-item>

            <el-form-item label="头像">
                <k-input-upload :multi="false" :value="getFormValue('avatar')"
                                @input="setFormValue('avatar', $event)"/>
            </el-form-item>

            <el-form-item label="称呼">
                <el-input :value="getFormValue('nickname')" @input="setFormValue('nickname', $event)"/>
            </el-form-item>

            <el-form-item label="手机号">
                <el-input :value="getFormValue('phone')" @input="setFormValue('phone', $event)"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" native-type="submit" :loading="subing">保存</el-button>
            </el-form-item>
        </el-form>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { AuthModule } from '@/store/auth';
import AdminContainer from '@/components/admin-container.vue';
import KInputUpload from '@/components/input-upload.vue';
import { editAccountInfo } from '@/services/account.service';
@Component({
    components: { KInputUpload, AdminContainer }
})
export default class MyInfo extends Vue {
    private data: any = {};
    private subing: boolean = false;

    get form() {
        return AuthModule.userinfo;
    }

    // 获取表单值
    getFormValue(key: string) {
        if (this.data[key]) {
            return this.data[key];
        }
        return (this.form as any)[key];
    }

    // 设置表单值
    setFormValue(key: string, val: any) {
        this.$set(this.data, key, val);
    }

    mounted() {
    }

    onSubmit() {
        this.subing = true;
        let data = {
            avatar: this.data.avatar ?? this.form.avatar,
            nickname: this.data.nickname ?? this.form.nickname,
            phone: this.data.phone ?? this.form.phone,
        };
        editAccountInfo(data)
            .finally(() => {
                this.subing = false;
            })
            .then(() => {
                AuthModule.updateInfo(data as any);
                this.$message.success('保存成功');
            })
    }
}
</script>
